<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>右侧悬浮框</title>
   <style>
      #div1{width:100px;height:150px;background:green;position:absolute;right:0;button:0;}   
   </style>
   <script>
       window.onscroll=function(){
	      var oDiv=document.getElementById("div1");
		  //兼容性写法
          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		  //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+"px";
		  startMove(scrollTop);
	   
	   };
       var timer=null;
	   function startMove(iTarget){
	   
	      var oDiv=document.getElementById("div1");
	      clearInterval(timer);
	      timer=setInterval(function(){
		    //控制div运动的速度，div离iTarget距离越近，速度就越慢，speed与距离成正比
		    var speed=(iTarget-oDiv.offsetTop)/6;		  				   
		   speed=speed>0?Math.ceil(speed):Math.floor(speed);
		   if(oDiv.offsetTop==iTarget){
		       clearInterval(timer);
		   }else{
		       oDiv.style.top=oDiv.offsetTop+speed+"px";
		   }		   		   		   		  
		  },30);
	   }
   
   </script>
</head>
<body style="height:2000px;">
  <div id="div1"></div>


</body>
</html>